<template>
    <!-- 表单组件 可在使用时 添加 flex-form 类名来进行单排排序 用于头部筛选搜索 :label-width="labelWidth" -->
    <el-form ref="form-element" :rules="rules" :model="form" :size="size">
        <slot :data="form"></slot>
        <el-form-item class="btn-item">
            <el-button
                v-show="showBtn.search"
                @click="clickSearchBtn"
                type="primary"
                icon="el-icon-search"
                >查询</el-button
            >
            <el-button v-show="showBtn.cancel" @click="clickCancelBtn"
                >取消</el-button
            >
            <el-button type="primary" v-show="showBtn.law" @click="clickLawBtn"
                ><i class="icon iconfont">&#xe7a4;</i> 规律分析</el-button
            >
            <el-button
                type="primary"
                v-show="showBtn.call"
                @click="clickCallBtn"
                ><i class="icon iconfont">&#xe7a4;</i> 通话分析</el-button
            >
            <el-button
                type="primary"
                v-show="showBtn.message"
                @click="clickMessageBtn"
                ><i class="icon iconfont">&#xe7a4;</i> 短信分析</el-button
            >
            <el-button
                v-show="showBtn.reset"
                @click="resetForm"
                type="primary"
                icon="el-icon-refresh-right"
                >重置</el-button
            >
            <el-button
                v-show="showBtn.add"
                @click="clickAddBtn"
                type="primary"
                icon="el-icon-plus"
                >新增</el-button
            >
            <el-button
                v-show="showBtn.refresh"
                @click="clickRefreshBtn"
                type="primary"
                icon="el-icon-refresh"
                >刷新</el-button
            >
            <el-button
                type="primary"
                v-show="showBtn.save"
                @click="clickSaveBtn"
                >保存</el-button
            >
            <el-button
                type="primary"
                v-show="showBtn.import"
                @click="clickImportBtn"
                ><i class="icon iconfont">&#xe7a5;</i> 导入</el-button
            >
            <el-button type="primary" v-show="showBtn.out" @click="clickOutBtn"
                ><i class="icon iconfont">&#xe7aa;</i> 导出</el-button
            >
            <el-button
                type="primary"
                v-show="showBtn.remove"
                @click="clickRemoveBtn"
                icon="el-icon-delete"
                >删除</el-button
            >
            <el-button
                type="primary"
                v-show="showBtn.sure"
                @click="clickSureBtn"
                >确认提交</el-button
            >
            <el-button
                type="primary"
                v-show="showBtn.submit"
                @click="clickSubmitBtn"
                icon="el-icon-circle-check"
                >提交</el-button
            >
            <el-button
                type="warning"
                v-show="showBtn.comeback"
                @click="clickComebackBtn"
                ><i class="icon iconfont">&#xe7ad;</i> 返回</el-button
            >
            <el-button
                class="login-btn"
                v-show="showBtn.login"
                @click="loginBtn"
                >登录</el-button
            >
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    name: 'BaseForm',
    props: {
        form: {
            // 表单每一项的对象属性
            type: Object,
            default: () => {
                return {};
            }
        },
        rules: {
            // 表单校验规则
            type: Object,
            default: () => {
                return {};
            }
        },
        labelWidth: {
            // label项的宽度
            type: String,
            default: () => {
                return '90px';
            }
        },
        size: {
            // 表单大小
            type: String,
            default: () => {
                return 'medium';
            }
        },
        showBtn: {
            // 操作按钮的显示
            type: Object,
            default: () => {
                return {
                    search: false,
                    cancel: false,
                    law: false,
                    call: false,
                    message: false,
                    reset: false,
                    add: false,
                    refresh: false,
                    save: false,
                    import: false,
                    out: false,
                    remove: false,
                    sure: false,
                    submit: false,
                    comeback: false,
                    login: false
                };
            }
        }
    },
    created() {},
    data() {
        return {};
    },
    methods: {
        clickSearchBtn() {
            this.$emit('click-search-btn');
        },
        clickCancelBtn() {
            this.$emit('click-cancel-btn');
        },
        clickLawBtn() {
            this.$emit('click-law-btn');
        },
        clickCallBtn() {
            this.$emit('click-call-btn');
        },
        clickMessageBtn() {
            this.$emit('click-message-btn');
        },
        resetForm() {
            this.$refs['form-element'].resetFields();
        },
        clickAddBtn() {
            this.$emit('click-add-btn');
        },
        clickRefreshBtn() {
            this.$emit('click-refresh-btn');
        },
        clickSaveBtn() {
            if (this.rules) {
                this.$refs['form-element'].validate(valid => {
                    // 通过验证
                    if (valid) {
                        return this.$emit('click-save-btn', true);
                    } else {
                        return this.$emit('click-save-btn', false);
                    }
                });
            } else {
                this.$emit('click-save-btn');
            }
        },
        clickImportBtn() {
            this.$emit('click-import-btn');
        },
        clickOutBtn() {
            this.$emit('click-out-btn');
        },
        clickRemoveBtn() {
            this.$emit('click-remove-btn');
        },
        clickSureBtn() {
            this.$emit('click-sure-btn');
        },
        clickSubmitBtn() {
            this.$emit('click-submit-btn');
        },
        clickComebackBtn() {
            this.$emit('click-comeback-btn');
        },
        loginBtn() {
            this.$refs['form-element'].validate(valid => {
                // 通过验证
                if (valid) {
                    this.$emit('login-btn', this.form);
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
@import '~@/assets/css/common.less';
.btn-item {
    text-align: center;
    margin-top: 2.75rem;
    ::v-deep .el-form-item__content {
        margin-left: 30px !important;
        .el-button--mini,
        .el-button--mini.is-round {
            padding-left: 10px;
            padding-right: 10px;
        }
        .el-button--primary {
            background-color: @theme-backgroundColor-primary;
            border-color: @theme-backgroundColor-primary;
            .icon {
                font-size: 1rem;
            }
        }
        .el-button--warning {
            background-color: @theme-backgroundColor-warning;
            border-color: @theme-backgroundColor-warning;
            .icon {
                font-size: 1rem;
            }
        }
    }
}

.login-btn {
    width: 13.33rem;
    height: 3.33rem;
    background: #00c1fe;
    border-radius: 2px;
    color: #ffffff;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    border: none;
    margin-left: auto;
    margin-right: auto;
}
</style>
